<template lang="pug">
	header
		.header-wrap(:class="{'header-white-theme':theme === 'white'}")
			.left-box
				.search-line
					.input-wrap
						.search-icon
						input.search-input(type="text" v-model='inputtext' :placeholder="placeholder" :placeholder-style="placeholderStyle" :disabled="!isEnable" :confirm-type="confirmType" @input="inputHandle" @confirm="confirmHandle" @focus="focusHandle" @click="inputClickHandle")
			.right-box(@click="clickHandle" v-if="rightText.length")
				.right-action
					.text {{rightText}}
</template>

<script>
export default {
	name: 'main-header',
	data() {
		return {
			inputtext: '',
			placeholderStyle: 'color:rgba(255,255,255,0.5)'
		}
	},
	props: {
		theme: {
			type: String,
			default: ''
		},
		placeholder: {
			type: String,
			default: ''
		},
		isEnable: {
			type: Boolean,
			default: true
		},
		confirmType: {
			type: String,
			default: 'done'
		},
		rightImg: {
			type: String,
			default: ''
		},
		rightText: {
			type: String,
			default: ''
		}
	},
	computed: {},
	created() {},
	mounted() {},
	methods: {
		clickHandle() {
			this.$emit('listenClick')
		},
		inputClickHandle() {
			this.$emit('listenInputClick')
		},
		inputHandle() {
			this.$emit('getValue', this.inputtext)
		},
		confirmHandle() {
			this.$emit('confirm')
		},
		focusHandle() {
			this.$emit('focus')
		}
	}
}
</script>

<style lang="stylus">
	header
		position fixed
		width 100%
		left 0
		top 0
		z-index 50
		.header-white-theme
			background-color white!important
			.left-box
				color blackFontColor!important
			.right-box
				.text
					color blackFontColor!important
		.header-wrap
			height 100px
			background-color themeColor
			position relative
			z-index 50
			display flex
			justify-content space-between
			padding 0 60px
			.left-box
				position relative
				z-index 50
				font-size 36px
				font-weight 500
				color white
				flex 1
				padding 20px 0
				.search-line
					height 60px
					z-index 51
					background-color rgba(255,255,255,0.2)
					border-radius 30px
					padding 12px 46px
					box-sizing border-box
					.input-wrap
						height 100%
						width 100%
						display flex
						align-items center
						.search-icon
							min-width 36px
							height 36px
							centerBackground('../assets/image/healthCard/icon_search.png')
						.search-input
							height 100%
							font-size 26px
							margin-left 10px
							width 100%
							color white
							border none
							background-color transparent
							outline none
			.right-box
				z-index 51
				margin-right -60px
				padding 0 0 0 30px
				.right-action
					width 100%
					height 100%
					display flex
					justify-content flex-end
					align-items center
					.text
						color white
						font-size 30px
						font-weight 400
						padding-right 60px
</style>
